<script setup>
import { ref } from 'vue'
import SingleButton from '@/components/SingleButton.vue'
import { useOrderStore, useUserStore } from '@/stores'
import showPrompt from '@/utils/showPrompt'
import { formatDate } from '@/utils/formatDate'

const userStore = useUserStore()
const orderStore = useOrderStore()
const props = defineProps({
  goodsInfo: Object
})

const close = () => {
  emit('close-prompt')
}

const quantity = ref(1)
const address = ref(userStore.userInfo.address)
const isVaild = ref(false)

const decrease = () => {
  if (quantity.value === 1) return
  quantity.value -= 1
}

const increase = () => {
  quantity.value += 1
}

const pay = () => {
  if (!userStore.userId) {
    return showPrompt('未登录，请先登录账号！', 'error')
  }
  if (!address.value) {
    isVaild.value = true
    return showPrompt('未填写收货地址', 'error')
  }
  userStore.setUserAddress(address.value)
  orderStore.setOrderList({
    name: userStore.userInfo?.name,
    totalPrice: (quantity.value * props.goodsInfo?.price).toFixed(2),
    orderTime: formatDate(new Date()),
    status: '已支付',
    goodsList1: [
      {
        name: props.goodsInfo?.name,
        price: (quantity.value * props.goodsInfo?.price).toFixed(2),
        quantity: quantity.value
      }
    ],
    address: address.value
  })
  showPrompt('支付成功', 'success')
  emit('close-prompt')
}

const observer = () => {
  if (!isVaild.value) return
  isVaild.value = false
}

const emit = defineEmits(['close-prompt', 'pay-success']) // 新增 pay-success 事件
</script>

<template>
  <div class="goods-pay">
    <div class="prompt-box">
      <div class="header">
        <h3>订单详情</h3>
        <SingleButton @click="close" style="font-size: 20px" text="×" />
      </div>
      <img :src="goodsInfo?.imgUrl" />
      <h4>商品名称</h4>
      <p>{{ goodsInfo?.name }}</p>
      <h4>单价</h4>
      <p>￥{{ goodsInfo?.price }}</p>
      <h4>数量</h4>
      <p>{{ quantity }}</p>
      <h4>收获地址</h4>
      <!-- <p v-if="userStore.userInfo?.address">{{ userStore.userInfo?.address }}</p> -->
      <input
        type="text"
        v-model="address"
        placeholder="未填写收货地址，本次填写后自动设为默认地址"
        required
        @input="observer"
        :class="{ error: isVaild }"
      />
      <div class="pay">
        <SingleButton :disabled="quantity <= 1" text="-" @click="decrease" />
        <span class="quantity">{{ quantity }}</span>
        <SingleButton text="+" @click="increase" />
        <span class="total"
          >总计：<span class="emphasize"
            >￥{{ (quantity * goodsInfo?.price).toFixed(2) }}</span
          ></span
        >
        <SingleButton class="pay-btn" text="立即支付" @click="pay" />
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.goods-pay {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  display: grid;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.373);

  .prompt-box {
    display: flex;
    flex-direction: column;
    width: 500px;
    height: 600px;
    padding: 20px;
    background-color: #fff;
    border-radius: 10px;

    .pay {
      margin-top: auto;
      display: flex;
      align-items: center;

      .quantity {
        width: 50px;
        text-align: center;
      }

      .total {
        margin-left: auto;
      }

      .pay-btn {
        margin-left: auto;
      }

      .emphasize {
        font-size: 17px;
        color: var(--theme-font-color);
      }
    }

    img {
      width: 200px;
      height: 200px;
      object-fit: cover;
      border-radius: 10px;
      margin-bottom: 20px;
    }

    .header {
      display: flex;
      align-items: center;
      justify-content: space-between;

      h3 {
        margin-bottom: 20px;
      }
    }

    h4 {
      color: var(--theme-font-color);
    }

    p {
      margin-bottom: 10px;
      font-size: 14px;
    }

    input {
      border: none;
      outline: none;
      height: 30px;
      box-shadow: 0 1px #dddddd;
      transition: all 0.1s ease;

      &:focus {
        box-shadow: 0 2px #dddddd;
      }

      &:valid {
        box-shadow: none;
      }
    }
  }

  input.error {
    box-shadow: 0 2px lightcoral;
  }
}
</style>
